// const renderData = JSON.parse(sessionStorage.getItem(('student-data'))) || [
//     {
//         stuId: 1,
//         uname: '克莱恩-莫雷蒂',
//         age: 19,
//         gender: '男',
//         salary: '20000',
//         city: '因蒂斯共和国',
//     },
//     {
//         stuId: 2,
//         uname: '萧炎',
//         age: 19,
//         gender: '男',
//         salary: '20000',
//         city: '上海',
//     },
// ]
// const tbody = document.querySelector('tbody');
// const form = document.querySelector('form');
// const items = form.querySelectorAll('[name]');
// render(renderData)
// form.addEventListener('submit',function (e) {
//     e.preventDefault()
//     for (let index = 0; index < items.length; index++) {
//         const element = items[index];
//         if (element.value === '') {
//             alert('请输入必选项！')
//         }
//     }
//     const obj = {
//         stuId: renderData[renderData.length -1]?.stuId + 1 || 1,
//         uname: items[0].value,
//         age: items[1].value,
//         gender: items[2].value,
//         salary: items[3].value,
//         city: items[4].value,
//     }
//     renderData.push(obj)
//     render(renderData)
//     sessionStorage.setItem('student-data',JSON.stringify(renderData))
//     this.reset()
// })
// function  render(data){
//     const newArr = data.map(function (item,index) {
//         const str = `
//         <tr>
//         <td>${item.stuId}</td>
//         <td>${item.uname}</td>
//         <td>${item.age}</td>
//         <td>${item.gender}</td>
//         <td>${item.salary}</td>
//         <td>${item.city}</td>
//         <td>
//           <a href="javascript:" data-id=${index}>删除</a>
//         </td>
//       </tr> 
//         `
//         return str
//     }
    
//     )
//     tbody.innerHTML = newArr.join('')
// }
// tbody.addEventListener('click',function (e) {
//     if (e.target.tagName === 'A') {
//        const index = e.target.dataset.id
//        renderData.splice(index,1) 
//        sessionStorage.setItem('student-data',JSON.stringify(renderData))
//        render(renderData)

//     }
// })


const tbody = document.querySelector('tbody');
const form  = document.querySelector('form');
const items = form.querySelectorAll('[name]');
const renderData = JSON.parse(sessionStorage.getItem('student_data'))  || [
    {
          stuId: 1001,
            uname: '克莱恩',
            age: 19,
            gender: '男',
            salary: '15000',
            city: '上海',
          }, {
            stuId: 1002,
            uname: '莫雷蒂',
            age: 29,
            gender: '男',
            salary: '15000',
            city: '上海',
          }
]
render(renderData)

function render(data) {
    const newArr = data.map(function (item,index) {
        const str = `
        <tr>
          <td>${item.stuId}</td>
          <td>${item.uname}</td>
          <td>${item.age}</td>
          <td>${item.gender}</td>
          <td>${item.salary}</td>
          <td>${item.city}</td>
          <td>
            <a href="javascript:" data-id='${index}'>删除</a>
          </td>
        </tr> 
        `
        return str
    })
    tbody.innerHTML = newArr.join('')

}

form.addEventListener('submit',function (e) {
    e.preventDefault()
    const obj = {
            stuId: renderData[renderData.length -1]?.stuId + 1,
            uname: items[0].value,
            age: items[1].value,
            gender: items[2].value,
            salary: items[3].value,
            city: items[4].value,
    }
    renderData.push(obj)
    sessionStorage.setItem('student_data',JSON.stringify(renderData))
    render(renderData)
})

tbody.addEventListener('click',function (e) {
    if (e.target.tagName === 'A') {
        const id = e.target.dataset.id
        renderData.splice(id,1)
    sessionStorage.setItem('student_data',JSON.stringify(renderData))
    render(renderData)
        
    }
})

